<!-- nav -->
<template>
    <div id="nav">
        <a-row type="flex" justify="space-around" align="middle" style="background: #fff;height: 50px;">
            <a-col :span="16" style="height: 100%;" :xs="2" :sm="2" :md="16" :lg="16" :xl="16">
                <a-menu v-model="current" mode="horizontal" class="nav-menu">
                    <a-menu-item key="logo" class="logo">
                        <a-col :span="24" :xs="0" :sm="0" :md="0" :lg="24" :xl="24">
                            <img src="../assets/logo.png" height="48px" />
                        </a-col>
                    </a-menu-item>

                    <a-menu-item key="index">
                        <router-link to="/">
                            <a-icon type="home" :style="{ color: '#ccc70f' }" />首页
                        </router-link>
                    </a-menu-item>
                    <a-menu-item key="cate">
                        <router-link to="/cate">
                            <a-icon type="barcode" :style="{ color: '#ccc70f' }" />分类
                        </router-link>
                    </a-menu-item>
                    <a-menu-item key="tag">
                        <router-link to="/tag">
                            <a-icon type="tags" :style="{ color: '#ccc70f' }" />标签
                        </router-link>
                    </a-menu-item>
                    <a-menu-item key="archive">
                        <router-link to="/archive">
                            <a-icon type="switcher" :style="{ color: '#ccc70f' }" />归档
                        </router-link>
                    </a-menu-item>
                    <a-menu-item key="abou">
                        <router-link to="/about">
                            <a-icon type="smile" :style="{ color: '#ccc70f' }" />关于
                        </router-link>
                    </a-menu-item>
                </a-menu>
            </a-col>
            <a-col :span="4" align="middle" :xs="0" :sm="0" :md="0" :lg="0" :xl="4" style="height: 100%;">
            </a-col>
        </a-row>


    </div>
</template>

<script>
    export default {
        data() {
            return {
                current: ['index'],
            };
        },
    };
</script>

<style scoped>
    .logo {
        cursor: default;
        border-bottom: unset !important;
    }

    .logo a {
        pointer-events: none;
    }

    .nav-menu li {
        font-size: 16px;
    }

    .ant-menu-horizontal {
        font-weight: bold;
    }
</style>